<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 600px;
      background-color: aquamarine;
      overflow: hidden;
      border: 1px solid blue;
      margin: 0 auto;
    }

    ul {
      list-style: none;
      /* float: left; */

    }

    ul li {
      float: left;
      width: 188px;
      background-color: brown;
      margin-left: 10px;
      margin-top: 10px;
      border: 1px solid rgb(140, 140, 140);
    }

    ul li .sp1 {
      /* display: block; */
      float: left;
      width: 190px;
      text-align: center;
      background-color: #ccc;
    }

    ul li .sp1 img {
      width: 160px;
    }
    ul li .sp2{
      display: block;
      color: cornflowerblue;
      font-weight: 600;
      position: relative;
    }
    .sp3{
      font-size: 14px;
      display: block;
      margin-top: 10px;
    }
    ul li span .img{
    width: 50px;
    position: absolute;  
    left:436px;
    }
  </style>

</head>

<body>
  <div class="box">
    <h3>商品列表</h3>
    <ul>
      <li><span class="sp1"><img src="./image/photo_01.jpg" alt=""></span><span class="sp2">2011新款T恤短袖</span><span class="sp3">一口价：68.00</span>
      </li>
      <li><span class="sp1"><img src="./image/photo_02.jpg" alt=""><img src="./image/xsq.png" alt="" class="img"></span><span class="sp2">2011新款T恤短袖</span><span class="sp3">一口价：68.00</span>
      </li>
      <li><span class="sp1"><img src="./image/photo_03.jpg" alt=""></span><span class="sp2">2011新款T恤短袖</span><span class="sp3">一口价：68.00</span>
      </li>
      <li><span class="sp1"><img src="./image/photo_04.jpg" alt=""></span><span class="sp2">2011新款T恤短袖</span><span class="sp3">一口价：68.00</span>
      </li>
    </ul>
  </div>
</body>

</html>